<template>
  <div>
    <tree-manage-content :treeData="treeData" :treeOptions="treeOptions"
     @treeEditHandle="treeEditHandle" @nodeHandle="nodeHandle">
      <template slot="headBtnGroup">
        <el-button v-if="isAuth('sys:role:save')" type="primary" icon="el-icon-edit" :size="size" @click="saveRoleHandle">添加角色</el-button>
        <el-button v-if="isAuth('sys:role:save')" type="primary" icon="el-icon-edit" :size="size" @click="bindMenuHandle">绑定菜单</el-button>
        <el-button v-if="isAuth('sys:role:delete')" type="primary" icon="el-icon-delete" :size="size" @click="batchDeleteMenuHandle">批量删除菜单</el-button>
      </template>
      <template slot="mainGroup">
        <table-content ref="table" :tableOptions="tableOptions" :tableSource="tableSource" @selectionChangeHandle="selectionChangeHandle"
         @sortChangeHandle="sortChangeHandle" @pageHandle="pageHandle">
        </table-content>
      </template>
    </tree-manage-content>
    <role-info ref="roleInfoDialog" :size="this.size" :nodeId="this.treeNode.id" @flush="flush"></role-info>
    <role-menu ref="roleMenuDialog" :size="this.size" @flushMenu="flushMenu"></role-menu>
  </div>
</template>

<script>
import { getRoleTreeApi, getRoleBelowMenusApi, deleteRoleMenuApi, batchDeleteRoleMenuApi } from '@/api/role'
import TreeManageContent from '@/components/common/tree-manage-content'
import TableContent from '@/components/table/table-content'
import RoleInfo from '@/views/modules/sys/role-info'
import RoleMenu from '@/views/modules/sys/role-menu'
export default {
  components: {
    TreeManageContent, TableContent, RoleInfo, RoleMenu
  },
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    return {
      treeData: [],
      treeOptions: {
        children: 'subRoles',
        label: 'name',
        targetField: 'code',
        ignoreFieldValue: 'root',
        editShow: true,
        headBtnGroupClass: '{ ; line-height: 43px; }',
        headBtnGroupWidth: '43px',
        mainGroupClass: '{ ; padding: 0; }'
      },
      treeNode: {
        id: '0',
        label: '',
        parentId: '0'
      },
      tableOptions: {
        size: this.size,
        highlightCurrentRow: true, // 是否要高亮当前行
        fit: true, // 列的宽度是否自撑开
        mutiSelect: true, // 是否显示选择框
        pagination: true // 是否分页
      },
      tableSource: {
        headers: [
          {
            prop: 'id',
            label: '菜单id',
            minWidth: '100px'
          },
          {
            prop: 'createTime',
            label: '建立时间',
            sortable: 'custom',
            formatData: (row, column, columnValue) => {
              return this.$time.formatDate(columnValue, 'yyyy-MM-dd HH:mm:ss')
            }
          },
          { prop: 'createName', label: '建立人' },
          { prop: 'name', label: '菜单名' },
          {
            prop: 'urlType',
            label: '路由类型',
            minWidth: '50px',
            formatData: (row, column, columnValue) => {
              let data = {
                '0': '页面',
                '1': '地址'
              }
              return data[columnValue]
            }
          },
          {
            prop: 'type',
            label: '菜单类型',
            minWidth: '50px',
            formatData: (row, column, columnValue) => {
              let data = {
                '0': '目录',
                '1': '菜单',
                '2': '按钮'
              }
              return data[columnValue]
            }
          },
          {
            prop: 'level',
            label: '层级',
            minWidth: '50px'
          },
          {
            prop: 'system',
            label: '系统标签',
            minWidth: '50px',
            formatData: (row, column, columnValue) => {
              let data = {
                false: '否',
                true: '是'
              }
              return data[columnValue]
            }
          },
          { prop: 'permission', label: '权限' },
          {
            operation: true,
            operations: [
              {
                label: '删除',
                type: 'danger',
                icon: 'el-icon-delete',
                show: true,
                permission: 'sys:role:delete',
                method: (index, row) => {
                  this.deleteRoleMenuHandle(index, row)
                }
              }
            ]
          }
        ],
        data: []
      },
      query: {
        sortField: '',
        sortRule: 1,
        page: 1,
        pageSize: 15
      },
      selections: []
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    getTree() {
      getRoleTreeApi().then(res => {
        this.treeData = res.data
      })
    },
    treeEditHandle(obj) {
      this.$refs.roleInfoDialog.dialogOptions.show = true
      this.$refs.roleInfoDialog.init(this.treeNode.id, 1)
    },
    nodeHandle(obj) {
      this.treeNode = obj.backData
      this.getMenus(this.treeNode.id, this.query)
    },
    getMenus(roleId, data = {}) {
      getRoleBelowMenusApi(roleId, data).then(res => {
        this.tableSource.data = res.data
      })
    },
    selectionChangeHandle(obj) {
      this.selections = obj.backData
    },
    sortChangeHandle(obj) {
      let column = obj.backData
      if (column.order) {
        this.query.sortField = column.prop
        // 倒序
        if (column.order === 'descending') {
          this.query.sortRule = 1
        } else {
          this.query.sortRule = 0
        }
      } else {
        // 不排序
        this.query.sortField = ''
        this.query.sortRule = 0
      }
      this.getMenus(this.treeNode.id, this.query)
    },
    pageHandle(obj) {
      this.query.page = obj.backData.page
      this.query.pageSize = obj.backData.pageSize
      this.getMenus(this.treeNode.id, this.query)
    },
    flush() {
      this.getTree(this.query)
    },
    flushMenu() {
      this.getMenus(this.treeNode.id, this.query)
    },
    bindMenuHandle() {
      this.$refs.roleMenuDialog.dialogOptions.show = true
      this.$refs.roleMenuDialog.init(this.treeNode)
    },
    batchDeleteMenuHandle() {
      let menuIds = this.selections.map(item => item.id)
      if (menuIds.length === 0) {
        return
      }
      this.$confirm('确定删除这些菜单关系?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchDeleteRoleMenuApi(this.treeNode.id, menuIds).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1500
          })
          this.flushMenu()
        }).catch(() => {
          this.$message({
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        })
      })
    },
    saveRoleHandle() {
      this.$refs.roleInfoDialog.dialogOptions.show = true
      this.$refs.roleInfoDialog.init(0, 0)
    },
    deleteRoleMenuHandle(_index, _item) {
      this.$confirm('确定删除该菜单关系?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoleMenuApi(this.treeNode.id, _item.id).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1500
          })
          this.flushMenu()
        }).catch(() => {
          this.$message({
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        })
      })
    }
  }
}
</script>

<style></style>
